<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ name: 'teacherschool' }">校区</el-breadcrumb-item>
        </el-breadcrumb>

        <div class="new-box">
            <el-button type="primary" @click='showDialog' >添加校区</el-button>
             <el-table
                :data="schoolList"
                style="width:70%;margin-top:20px"
             >
                <el-table-column label="序号"  type="index">
                   
                </el-table-column>
                <el-table-column
                    label="校区"
                    prop="schname"
                >
                </el-table-column>
                 <el-table-column
                    label="编码"
                >
                    <template slot-scope="scope">
                        
                        <el-tag   effect="dark" type="success"> {{scope.row.schid}}</el-tag>
                    </template>
                </el-table-column>
                 <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-popconfirm
                            confirmButtonText='好的'
                            cancelButtonText='不用了'
                            icon="el-icon-info"
                            iconColor="red"
                            title="这个操作很危险哦,真的要删除"
                            @onConfirm="deleteItem(scope.row._id)"
                            >
                            <el-button slot="reference" type="danger" size="small" >删除</el-button>
                         </el-popconfirm>
                    </template>
                 </el-table-column>
             </el-table>
        </div>

           

        <el-dialog
            title="添加校区"
            :visible.sync="dialogVisible"
            width="30%"
        :before-close="handleClose">
        <el-form
        :rules="rules"
        :model="form"
        ref="schoolref"
        >
            <el-form-item label="校区名称"  prop="schname">
                <el-input v-model="form.schname" />
            </el-form-item>
            <el-form-item label="校区编码" prop="schid" >
                <el-input  v-model="form.schid"  />
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">暂不添加</el-button>
            <el-button type="primary" @click="addschool">确 定</el-button>
        </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name:"",
    data(){
        return {
            schoolList:[],
            dialogVisible:false,
            rules:{
                schid:[
                    {required:true,message:"请输入校区编码",trigger:"blur"}
                ],
                 schname:[
                    {required:true,message:"请输入校区名称",trigger:"blur"}
                ]
            },
            form:{}
        }
    },
    methods:{
        deleteItem(_id){
            console.log(_id)
            this.$axios.post('/vue/delschool',{
                _id
            }).then(res=>{
                if(res.data.type){
                    this.schoolList = this.schoolList.filter(item=>item._id!==_id);
                }
            })
        },
        showDialog(){
            this.dialogVisible=true; 
        },
        handleClose(){
            this.dialogVisible=false; 
        },
        addschool(){
            this.$refs.schoolref.validate(valid=>{
                if(valid){
                    // this.dialogVisible=false;
                    this.$axios.post("/vue/addschool",this.form)
                    .then(res=>{
                        if(res.data.type){
                            this.dialogVisible=false; 
                            this.schoolList = [this.form,...this.schoolList];
                        }
                    })
                }else{
                    this.$message.error("请务必先填写信息") 
                }
            })
            
        }
    },
    mounted(){
        this.$axios.post("/vue/getschool")
        .then(res=>{
            this.schoolList = res.data.result;
        })
    }
}
</script>


<style lang="scss" >

</style>
